<template>
  <div class="container">
    <div class="">
      <el-space class="my">
        <div>时间</div>
        <el-date-picker
          v-model="saleDate"
          type="daterange"
          class="w-[210px]"
          value-format="YYYY-MM-DD"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
      </el-space>
      <el-table
        ref="tableRef"
        row-key="orderId"
        :data="mainOrderList"
        @row-click="handleRowClick"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="订单号" prop="TOrderCode"></el-table-column>
        <el-table-column label="客户" prop="CustomerName"></el-table-column>
        <el-table-column label="合计金额" prop="TPrice"></el-table-column>
        <el-table-column label="实收金额" prop="actualPay"></el-table-column>
        <el-table-column
          label="采购金额"
          prop="purchaseAmount"
        ></el-table-column>
        <el-table-column label="利润" prop="profit"></el-table-column>
      </el-table>
    </div>
    <el-table :data="subOrderList" class="mt-8" v-loading="loading">
      <el-table-column label="收付类型" prop="IsDelivery">
        <!-- <template v-slot="scope">
          <el-select v-model="scope.row.model" placeholder="选择收付类型">
            <el-option
              v-for="item in paymentTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template> -->
      </el-table-column>
      <el-table-column label="订单号（总单）" prop="IsDelivery">
      </el-table-column>
      <el-table-column label="金额" prop="Money_Total">
        <template v-slot="scope">
          <el-input
            v-model="scope.row.IsDelivery"
            placeholder="请输入金额"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="金额说明" prop="RemarkView"></el-table-column>
      <el-table-column
        label="日期"
        prop="TOrderSDate"
        :formatter="(row) => timeStampFormatter(row.TOrderSDate, true)"
      ></el-table-column>
      <!-- <el-table-column label="是否发货" prop="IsDelivery"></el-table-column>
      <el-table-column label="总金额" prop="Money_Total"></el-table-column>
      <el-table-column label="打款明细" prop="detail"></el-table-column>
      <el-table-column label="打款汇总" prop="set"></el-table-column>
      <el-table-column label="采购金额" prop="purchaseAmount"></el-table-column>
      <el-table-column label="采购名称" prop="purchaseName"></el-table-column>
      <el-table-column label="成本汇总" prop="cost"></el-table-column>
      <el-table-column label="利润" prop="profit"></el-table-column> -->
    </el-table>
  </div>
</template>
<script setup>
import tableHeaderConfig from "../../print/tableConfig.json";
import dayjs from "dayjs";
import {
  saleOrderQueryApi,
  saleOrderDetailApi,
} from "@/api/order/manage/index.js";
import { timeStampFormatter } from "@/utils";
const state = reactive({
  mainOrderList: [],
  subOrderList: [],
  paymentTypes: [{
    label: '实收',
    value: '实收'
  }],
  loading: false,
});
const { mainOrderList, subOrderList, paymentTypes, loading } = toRefs(state);

const tableRef = ref(null);

// 获取当前月份的第一天
const firstDayOfMonth = dayjs().startOf("month").format("YYYY-MM-DD");
// 获取当前月份的最后一天
const lastDayOfMonth = dayjs().endOf("month").format("YYYY-MM-DD");
const saleDate = ref([firstDayOfMonth, lastDayOfMonth]);

onMounted(async () => {
  getSaleData();
});
async function getSaleData() {
  const res3 = await saleOrderQueryApi({
    BeginDate: saleDate.value[0],
    EndDate: saleDate.value[1],
  });
  mainOrderList.value = res3.Data || [];
  // submitTableRef.value.clearSelection();
  mainOrderList.value.forEach((item) => {
    item.OrderCodeStr = "";
  });
}
async function handleRowClick(row, column) {
  loading.value = true;
  tableRef.value.clearSelection();
  tableRef.value.toggleRowSelection(row, true);
  if (tableRef.value.getSelectionRows().length == 1) {
    const res = await saleOrderDetailApi(row.TOrderId);
    subOrderList.value = res.OrderList;
  }
  loading.value = false;
}
</script>
<style scoped>
.container {
  padding: 10px 20px;
}
</style>
